<template>
	<view class="labor-class">
		<view class="class-top">
			<view class="class-search" @click="goSearch">
				<u-search placeholder="请输入" v-model="keyword" animation="false"></u-search>
			</view>
		</view>
		<view class="content">
			<view v-for="(item,index) in datalist" :key="index" @click="goDetailPage(item,index)">
				<class-list-item :row="item"></class-list-item>
			</view>
		</view>
	</view>
</template>

<script>
	import youScroll from '@/components/uni-list-scroll/you-scroll'
	import {
		getClassList
	} from '@/static/js/api/home.js';
	import request from '@/static/js/request.js';
	import ClassListItem from './components/ClassListItem.vue'
	import {share} from '@/mixins/index.js'
	export default {
		mixins:[share],
		components: {
			youScroll,
			ClassListItem
		},
		data() {
			return {
				ClassList: [{
						name: "安全交底",
						// router: '/pages/'
					},
					{
						name: "安全教育",
						// router: '/pages/'
					},
					{
						name: "全部分类",
						// router: '/pages/'
					}
				],
				videosList: [],
				datalist:[],
				keyword:''
			}
		},
		mounted() {
			// this.$refs.scroll.loadData();
			this.getdata()
		},
		methods: {
			getdata(){
				getClassList(1, 999).then(res => {
					// console.log(res);
					this.datalist = res.data
				})
			},
			getClassData(pageIndex, pageSize) {
				// uni.showLoading()
				let url = request.getBaseUrl();
				return getClassList(pageIndex, pageSize).then(res => {
					res.data = res.data.map(m => {
						let urlImage = url + m.url_images
						return {
							urlImage,
							...m,
							
						}
					})
					// uni.hideLoading()
					return res.data;
				})
			},
			goDetailPage(item, index) {
				// console.log(item)
				uni.navigateTo({
					url: `/pages/home/class/ClassDetailPage?id=${item.id}`
				})
			},
			goSortPage(item) {
				// wx.chooseMessageFile({
				// 	count: 1,
				// 	type: 'file',
				// 	success(res) {
				// 		var filename = res.tempFiles[0].name
				// 		// console.info(filename);
				// 		uni.showToast({
				// 			title: filename
				// 		})
				// 	}
				// })
				uni.navigateTo({
					url: `/pages/home/class/ClassSortPage?select=${item.name}`
				})
			},
			goSearch() {
				uni.navigateTo({
					url: "/pages/home/class/ClassSearchPage"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.labor-class {
		height: 100vh;
		background: #F4F5F9;
		position: relative;

		.class-top {
			display: flex;
			text-align: center;
			align-items: center;
			padding: 30rpx 22rpx;
			background: #fff;

			.class-search {
				height: 60rpx;
				display: flex;
				text-align: left;
				align-items: center;

				.image-search {
					width: 44rpx;
					height: 44rpx;
					margin-right: 12rpx;
				}

				&>input {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}

				.placeholder-input {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}
			}

			.class-menu {
				margin-left: 30rpx;
				width: 394rpx;
				padding: 0rpx 30rpx;
				height: 80rpx;
				background: #EFF0F1;
				border-radius: 40rpx;
				display: flex;
				text-align: center;
				align-items: center;

				.class-menu-item {
					flex: 0 0 34%;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}

		.content {
			.video-item {
				display: flex;
				align-items: center;
				background: #fff;
				padding: 20rpx 30rpx 20rpx 30rpx;
				margin-bottom: 20rpx;

				.video-item-image {
					width: 226rpx;
					height: 168rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.video-content {
					flex: 1;
					margin-left: 23rpx;

					.video-word {
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						margin-bottom: 8rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
						line-height: 44rpx;
					}

					.video-label {
						display: flex;
						margin-bottom: 35rpx;

						.label-name {}

						.video-date {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
							flex: 1;
							text-align: right;
						}
					}

					.video-remarks {
						display: flex;
						text-align: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;

						.video-time {
							flex: 1;
							text-align: left;
						}

						.video-eye {
							width: 30rpx;
							height: 22rpx;
							margin-right: 14rpx;
						}

						.video-value {
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>
